<template>
  <div class="g-wrap p-pl f-pr">
    <div class="u-title f-cb">
      <h3><span class="f-ff2 d-flag">评论</span>
      </h3>
    </div>
    <div class="send-comment">
      <div class="comment-head">
        <a  class="head f-pr">
          <img :src="changeUrlToResizeImg(userInfo.avatarImgUrl, 80)" height="80px" width="80px">
        </a>
      </div>

      <el-form :model="commentForm" :rules="rules" ref="commentForm" class="comment-form">
        <el-form-item label="" prop="comment">

          <el-input type="textarea" v-model="commentForm.comment"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitCommentForm('commentForm')">评论</el-button>
          <el-button @click="resetCommentForm('commentForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="comment-list">
      <comment-card v-for="(item, index) in comments" :key="item.id" :comment="item"></comment-card>
    </div>

    <pagination :page-num="pageNum" :pages="pages" :get-data-with-page-num="getComments"></pagination>

  </div>
</template>

<script>
  import {playlistComment, userDetail, albumComment, songComment, apiContext} from  './../service/getData';
  import CommentCard from "./commentCard";
  import Pagination from './pagination'
  import {getUser} from '../util/userUtils'

  export default {
    name: 'commentList',
    props: {
      title: {
        type: String,
      },
      targetId: {

      },
      commentType: {

      }

    },
    data () {
      return {
//        msg: 'this is the content of area'
        userInfo: {
          name: "",
          avatarImgUrl: "http://p1.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg?param=80y80",
        },
        comments: [],
        commentForm: {
          comment: ''
        },
        rules: {
          comment: [
            { required: true, message: '请输入评论', trigger: 'blur' }
          ]
        },
        pageNum: 1,
        pageSize: 10,
        pages: 1
      }
    },
    methods: {
      changeUrlToResizeImg(picUrl, size) {
        return picUrl.replace(/yunmusic_dev/, "resize_" + size + 'x' + size);
      },
      submitCommentForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // alert('submit!');
            if (getUser() == null) {
              this.$message({
                message: '请先登录',
                type: 'info'
              });
            }
            let user = getUser();
            let userId = user.id;
            let userToken = user.userToken;
            this.$http.post(apiContext+"comment/publish", {
              userId: userId,
              targetId: this.targetId,
              type: this.commentType,
              content: this.commentForm.comment
            }, {
              // emulateJSON : true,
              headers: {
                'Content-Type': 'application/json',
                'userId': userId,
                'userToken': userToken
              }}).then(res => {
              console.log(res);
              let status = res.body.status;
              if (status === 200) {
                this.$message({
                  message: '评论成功',
                  type: 'success'
                });
                // 刷新评论
                this.getComments(1);
                this.commentForm.comment = "";
              } else {
                this.$message({
                  message: res.body.msg,
                  type: 'error'
                });
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

      resetCommentForm(formName) {
        this.$refs[formName].resetFields();
      },
      getComments(pageNum) {
        this.comments = []
        if (this.commentType === 0) {
          songComment(this).get({
            songId: this.targetId,
            pageNum: pageNum,
            pageSize: this.pageSize
          }).then(res => {
            console.log(res);
            let status = res.body.status;
            if (status === 200) {
              this.comments = res.body.data.rows;
              this.pageNum = res.body.data.page;
              this.pages = res.body.data.pages;
            }
          });
        } else if (this.commentType === 1) {
          playlistComment(this).get({
            playlistId: this.targetId,
            pageNum: pageNum,
            pageSize: this.pageSize
          }).then(res => {
            console.log(res);
            let status = res.body.status;
            if (status === 200) {
              this.comments = res.body.data.rows;
              this.pageNum = res.body.data.page;
              this.pages = res.body.data.pages;
            }
          });
        } else if (this.commentType === 2) {
          albumComment(this).get({
            albumId: this.targetId,
            pageNum: pageNum,
            pageSize: this.pageSize
          }).then(res => {
            console.log(res);
            let status = res.body.status;
            if (status === 200) {
              this.comments = res.body.data.rows;
              this.pageNum = res.body.data.page;
              this.pages = res.body.data.pages;
            }
          });
        }

      },
      getUserDetail() {
        let user = getUser();
        userDetail(this).get({
          userId: user['id']
        }).then(res => {
          console.log(res)
          let status = res.body.status;
          if (status === 200) {
            let data = res.body.data;

            this.userInfo = user;
            this.userInfo['numberOfFollower'] = data.numberOfFollower;
            this.userInfo['numberOfFollow'] = data.numberOfFollow;
          }
        })
      }
    },
    mounted(){
      this.getComments(this.pageNum);
      if (getUser() !== null) {
        this.getUserDetail();
      }
    },
    components: {
      Pagination,
      CommentCard

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  .g-wrap {
    padding: 40px;
  }

  .f-pr {
    position: relative;
    zoom: 1;
  }

  div {
    display: block;
  }

  .u-title {
    height: 40px;
    border-bottom: 2px solid #c20c0c;
  }

  .f-cb {
  }

  .f-ff2 {
    font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
  }

  .f-cb:after {
    clear: both;
    content: '.';
    display: block;
    height: 0;
    visibility: hidden;
  }

  .send-comment{
    margin-top: 20px;
    display: flex;
  }

  .head {
    float: left;
    width: 80px;
    height: 80px;
    margin-left: 20px;
    _margin-left: 10px;
    padding: 2px;
    background: #fff;
    border: 1px solid #dadada;
  }

  .comment-form {
    flex-grow: 20
  }

  .comment-head {
    flex-grow: 1
  }
</style>
